<template>
  <section>

    <el-col :span="24">
      <el-tabs v-model="tabs" type="card" @tab-click="handleClick">
        <el-tab-pane label="Job Info" name="a">
          <el-card class="box-card">
            <el-row>
              <el-col :span="4">
                <span class="">Job Id :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.id}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Name :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.appName}}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <span class="">App Path :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.appPath}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Run :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.run}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <span class="">Status :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.status}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">User :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.user}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <span class="">Group :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.group}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Patent Coord :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.patentCoord}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <span class="">Create Time :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.createdTime}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Start Time :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.startTime}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <span class="">Last Modified :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.lastModTime}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">End Time :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.endTime}}</span>
              </el-col>
            </el-row>

          </el-card>

          <el-table
            :data="aTable"
            border
            style="width: 100%">
            <el-table-column prop="id" label="Action Id"></el-table-column>
            <el-table-column prop="name" label="Name"></el-table-column>
            <el-table-column prop="type" label="Type"></el-table-column>
            <el-table-column prop="status" label="Status"></el-table-column>
            <el-table-column prop="transition" label="Transition"></el-table-column>
            <el-table-column prop="startTime" label="StartTime"></el-table-column>
            <el-table-column prop="endTime" label="EndTime"></el-table-column>
          </el-table>


        </el-tab-pane>

        <el-tab-pane label="Job Definiton" name="b">
          <pre>{{bLog}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Job Configuration" name="c">
          <pre>{{cConf}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Job Log" name="d">

          <!--工具条-->
          <el-col :span="24" class="toolbar">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <Search :allOpts="formInline.allOpts" v-model="formInline.cOpts" @blur="dSearch"></Search>
              </el-form-item>
            </el-form>
          </el-col>


          <pre>{{dLog}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Job Error Log" name="e">
          <pre>{{eLog}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Job Audit Log" name="f">
          <pre  style="white-space: pre-wrap;word-wrap: break-word;">{{fLog}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Job DAG" name="g" style="text-align: center;">
          <img :src="imgData" alt="">
        </el-tab-pane>
      </el-tabs>
    </el-col>

  </section>
</template>

<script>
  //	import util from '../../common/util'
  import dao from '../../common/dao'
  import Search from '../../components/Search.vue'

  export default {
    components: {Search},
    data() {
      return {
        tabs: 'a',
        tableData: [],
        aCard: {},
        aTable: [],
        bLog: '',
        cConf: '',
        dLog: '',
        formInline: {
          allOpts: [{
            key: 'logfilter',
            label: 'Search Filter',
            type: '',
            val: ''
          }],
          cOpts: [{
            key: 'logfilter',
            label: 'Search Filter',
            type: '',
            val: ''
          }]
        },
        imgData: '',
        eLog: '',
        fLog: '',
        query: {},
      }
    },
    methods: {
      handleClick: function () {
      },
      dSearch(){
        this.getJobLog();
      },
      oozieJobinfo(){
        let id = this.query.task_real_id
        dao.oozieJobinfo({id}).then(res => {
          if (res.FX.err) return false
          let results = res.body.results || {}
          this.aCard = results.jobinfo || {}
          this.aTable = this.aCard.actions || []
          this.cConf = this.aCard.conf || ''
        })
      },
      getJobDefinition(){
        let id = this.query.task_real_id
        dao.getJobDefinition({id}).then(res => {
          if (res.FX.err) return false
          this.bLog = res.body.results.log || ''
        })
      },
      getJobLog(){
        let id = this.query.task_real_id
        let logfilter = this.formInline.cOpts[0].val || ''
        dao.getJobLog({id, logfilter}).then(res => {
          if (res.FX.err) return false
          this.dLog = res.body.results.log || ''

        })
      },
      getJobErrorLog(){
        let id = this.query.task_real_id
        dao.getJobErrorLog({id}).then(res => {
          if (res.FX.err) return false
          this.eLog = res.body.results.log || ''
        })
      },
      getJobAuditLog(){
        let id = this.query.task_real_id
        dao.getJobAuditLog({id}).then(res => {
          if (res.FX.err) return false
          this.fLog = res.body.results.log || ''
        })
      },
      getJobGraph(){
        let id = this.query.task_real_id
        dao.getJobGraph({id}).then(res => {
          this.imgData = URL.createObjectURL(res.bodyBlob)
        })
      },
      pageInit(){
        this.query = this.$store.state.route.query || {};
        this.oozieJobinfo()
        this.getJobDefinition()
        this.getJobLog()
        this.getJobErrorLog()
        this.getJobAuditLog()
        this.getJobGraph()
      }
    },
    mounted: function () {
      this.pageInit()
    }
  }
</script>

<style scoped>
  .box-card {
    margin-bottom: 20px;
    color: #666;
  }
  .box-card .el-row{
    margin: 5px 0;
  }
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .box-card .el-col-4{
    padding-right: 10px;
    text-align: right;
    font-weight: bold;
  }
  .box-card .el-col-8{
    min-height: 1px;
  }

</style>